<template>
  <div class="base-info" v-if="Object.keys(goods).length !== 0">
     <div class="info-title">
       {{goods.title}}
     </div>
     <div class="info-price">
       <span class="n-price">{{goods.newPrice}}</span>
       <span class="o-price">{{goods.oldPrice}}</span>
       <span v-if="goods.discount" class="discount">{{goods.discount}}</span>
     </div>
     <div class="info-other">
       <span>{{goods.columns[0]}}</span>
       <span>{{goods.columns[1]}}</span>
       <span>{{goods.services[goods.services.length-1].name}}</span>
     </div>
     <div class="info-service">
       <!-- 遍历index从1开始 -->
       <div class="info-service-item" v-for="index in goods.services.length-1" :key="index">
         <img :src="goods.services[index-1].icon" alt="" v-if="goods.services[index-1].icon">
         <span>{{goods.services[index-1].name}}</span>
       </div>
     </div>
  </div>
</template>

<script>
export default {
  name:"DetailBaseInfo",
  props:{
    goods:{
      type:Object,
      default(){
        return {}
      }
    }
  }
}
</script>

<style scoped>
   .base-info {
     padding: 0 10px;
     color: #999;
     border-bottom: 8px solid #f2f5f8;
   }
   .info-title {
     margin-top: 15px;
     font-size: 20px;
     color: #333;
   }

   .info-price {
     margin: 15px 0;
   }

   .info-price .n-price {
     font-size: 26px;
     color: var(--color-high-text);
   }

   .info-price .o-price {
     margin-left: 8px;
     text-decoration: line-through;
     font-size: 16px;
   }

   .info-price .discount {
     display: inline-block;
     margin-left: 8px;
     padding:3px 5px;
     position: relative;
     bottom: 8px;
     background-color: var(--color-high-text);
     color: #fff;
     font-size: 15px;
     border-radius: 8px;
   }

   .info-other {
     margin: 8px 0;
     padding: 5px 0;
     display: flex;
     justify-content: space-between;
     border-bottom: 1px solid rgba(100,100,100,.1);
     font-size: 16px;
   }
   .info-other span {
     flex:1;
   }

   .info-other span:nth-child(2){
     text-align: center;
   }

   .info-other span:nth-child(3){
     text-align: end;
   }

   .info-service {
     display: flex;
     height: 60px;
     line-height: 60px;
     justify-content: space-between;
   }

   .info-service-item img {
     width: 16px;
     position: relative;
     bottom: 1px;
     margin-right: 3px;
   }
   
   .info-service-item span {
    font-size: 16px;
    color: #333;
  }

   .info-service-item:nth-child(2){
     text-align: center;
   }

   .info-service-item:nth-child(3){
     text-align: end;
   }
</style>